<template>
  <el-form
    ref="ruleFormRef"
    style="max-width: 600px"
    :model="ruleForm"
    :rules="props.rules"
    :label-position="props.position"
    label-width="auto"
    class="demo-ruleForm"
    status-icon
  >
    <!-- {{ props.editItem }} -->
    <!-- 输入 -->
    <template v-for="(item, index) in props.formList" :key="index">
      <el-form-item v-if="item.type === 'input'" :label="item.label" :prop="item.model">
        <el-input v-model="ruleForm[item.model]" :maxlength="item.max" />
      </el-form-item>
      <!-- 下拉 -->
      <el-form-item v-if="item.type === 'select'" :label="item.label" :prop="item.model">
        <el-select v-model="ruleForm[item.model]" :placeholder="item.placeholder">
          <el-option v-for="(sele, index) in item.data" :key="index" :label="sele.label" :value="sele.value" />
        </el-select>
      </el-form-item>
      <!-- 备注 -->
      <el-form-item v-if="item.type === 'textarea'" :label="item.label" :prop="item.model">
        <el-input v-model="ruleForm[item.model]" :max="item.max" maxlength="200" show-word-limit type="textarea" />
      </el-form-item>
      <!-- 级联 -->
      <el-form-item v-if="item.type === 'cascader'" :label="item.label" :prop="item.model">
        <el-cascader
          style="width: 100%"
          v-model="ruleForm[item.model]"
          :options="item.options"
          clearable
          @change="getCheckedNodes"
        />
      </el-form-item>
    </template>
    <div class="btn" v-if="isShowBtn">
      <el-button type="info" @click="handelClickBack">取消</el-button>
      <el-button type="primary" @click="submitForm(ruleFormRef)">确定</el-button>
    </div>
  </el-form>
</template>

<script setup>
/* 修改订单状态
 * @param  formList 表单列表
 */
/* rules
 * @param  rules 表单规则
 */
import { ref, defineProps, defineEmits, onMounted, watch } from "vue";
import china from "@/utils/china.json";
const emits = defineEmits(["update", "back"]);
const props = defineProps({
  formList: {
    type: Array,
    default() {
      return [];
    }
  },
  rules: {
    type: Object,
    default() {
      return {};
    }
  },
  position: {
    type: String,
    default() {
      return "left";
    }
  },
  isShowBtn: {
    type: Boolean,
    default() {
      return true;
    }
  },
  // 编辑回显的数据
  editItem: {
    type: Object,
    default() {
      return {};
    }
  }
});
const ruleFormRef = ref();
const ruleForm = ref({
  // ...props.editItem
});
const chinas = ref(china);
const detailAdess = ref();
// 校验
const submitForm = async formEl => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
      emits("update", ruleForm.value, detailAdess.value);
      ruleForm.value = {};
    } else {
      console.log("error submit!", fields);
    }
  });
};
// 取消
const handelClickBack = () => {
  ruleForm.value = {};
  emits("back");
};
function getCheckedNodes(value) {
  let obj = {};
  chinas.value.map(it => {
    if (it.cityCode === value[0]) {
      obj = it;
    }
  });
  let obj1 = {};
  obj.children.map(it => {
    if (it.cityCode == value[1]) {
      obj1 = it;
    }
  });
  let obj2 = {};
  obj1.children.map(it => {
    if (it.cityCode == value[2]) {
      obj2 = it;
    }
  });
  detailAdess.value = obj.name + obj1.name + obj2.name;
}
const choseItem = ref({});
onMounted(() => {
  if (Object.keys(props.editItem).length > 0) {
    let obj = JSON.stringify(props.editItem);
    let objCopy = JSON.parse(obj);
    choseItem.value = objCopy;
    ruleForm.value = objCopy;
  }
});
watch(
  () => props.editItem,
  () => {
    let obj = JSON.stringify(props.editItem);
    let objCopy = JSON.parse(obj);
    choseItem.value = objCopy;
    ruleForm.value = objCopy;
  },
  { deep: true, immediate: true }
);
// 回显数据城市的数据
watch(
  () => ruleForm.value,
  item => {
    const receivingAreaIds = item.receivingAreaIds;
    console.log(receivingAreaIds, "receivingAreaIds");
    // return
    if (receivingAreaIds == undefined) return;
    let city1 = "";
    let city2 = "";
    let city3 = "";
    chinas.value.map(it => {
      if (receivingAreaIds.includes(it.value)) {
        city1 = it.label;
        if ("children" in it) {
          it.children.map(cit => {
            if (receivingAreaIds.includes(cit.value)) {
              city2 = cit.label;
            }
            if ("children" in cit) {
              cit.children.map(cit2 => {
                if (receivingAreaIds.includes(cit2.value)) {
                  city3 = cit2.label;
                }
              });
            }
          });
        }
      }
    });
    // detailAdess.value = city1 + city2 + city3;
  },
  { deep: true, immediate: true }
);
</script>
<style scoped lang="scss">
.demo-ruleForm {
  .el-button--info,
  .el-button--info:hover {
    background-color: #f2f3f5;
    color: black;
    border: none;
  }
  .el-button--primary,
  .el-button--primary:hover {
    background-color: #424e66;
    color: white;
    border: none;
  }
}
.btn {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px 0 0 0;
}
</style>
